<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8"	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<link rel="stylesheet" type="text/css" href="../js/ddsmoothmenu/ddsmoothmenu.css" />
<link rel="stylesheet" type="text/css" href="../js/ddsmoothmenu/ddsmoothmenu-v.css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="../js/ddsmoothmenu/ddsmoothmenu.js"></script>

<script type="text/javascript">

ddsmoothmenu.init({
	mainmenuid: "smoothmenu1", //menu DIV id
	orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
	classname: 'ddsmoothmenu', //class added to menu's outer DIV
	//customtheme: ["#1c5a80", "#18374a"],
	contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})

ddsmoothmenu.init({
	mainmenuid: "smoothmenu2", //Menu DIV id
	orientation: 'v', //Horizontal or vertical menu: Set to "h" or "v"
	classname: 'ddsmoothmenu-v', //class added to menu's outer DIV
	//customtheme: ["#804000", "#482400"],
	contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})

</script>
</head>
<body>
<h2>Example 1 </h2>

<div id="smoothmenu1" class="ddsmoothmenu">
<ul>
<c:forEach items="${bible}" var="b">
	<li><a href="#">[Holy Bible]</a>
		<c:if test="${fn:length(b.volumeList)>0}">
		 	<ul>
			<c:forEach items="${b.volumeList}" var="v"><!-- chapterList -->
				 <li><a href="#">${v.name}</a>
				 	<c:if test="${fn:length(v.chapterList)>0}">
				 		<ul>
				 			<c:forEach items="${v.chapterList}" var="c">
				 				<li><a href="#">${c.name}</a></li>
				 			</c:forEach>
				 		</ul>
				 	</c:if>
				 </li>
			</c:forEach>
			</ul>
		</c:if>
	</li>
</c:forEach>
</ul>


<input type="text" value="search"/> 
<input type="button" value="Search"/>
<span style="color:white">[中文] [ENGLISH]</span>
<br style="clear: left" />
</div>

<!-- 
<h2 style="margin-top:200px">Example 2</h2>
<div id="smoothmenu2" class="ddsmoothmenu">
<ul>
<c:forEach items="${bible}" var="b">
	<li><a href="#">${b.name}</a>
		<c:if test="${fn:length(b.volumeList)>0}">
		 	<ul>
			<c:forEach items="${b.volumeList}" var="c">
				 <li><a href="#">${c.name}</a></li>
			</c:forEach>
			</ul>
		</c:if>
	</li>
</c:forEach>
</ul>
</div>
 -->
<br style="clear: left" />
</body>
</html>